<template>
	<view class="page">
		<view class="container">
			<view class="header">
				<text>借贷</text>
				<view class="search">
					<input class="searchInput" type="text" value="" placeholder="搜索相关信息" />
					<image class="searchImg" src="../../static/wealthImg/路径%2019.png" mode=""></image>
				</view>
				<image src="../../static/wealthImg/组%204735.png" mode=""></image>
			</view>
		</view>
		<view class="main-box">
			<view class="main">
				<view class="main_nav">
					<view>
						<image src="../../static/wealthLoanImage/组 4765.png" mode=""></image>
						<text>抢疯了</text>
						<view>
							<image src="../../static/wealthLoanImage/矩形 1574.png" mode=""></image>
							<text>免息</text>
						</view>
					</view>
					<view>
						<image src="../../static/wealthLoanImage/组 4766.png" mode=""></image>
						<text>抢疯了</text>
						<view>
							<image src="../../static/wealthLoanImage/矩形 1574.png" mode=""></image>
							<text>免息</text>
						</view>
					</view>
					<view>
						<image src="../../static/wealthLoanImage/组 4767.png" mode=""></image>
						<text>抢疯了</text>
						<view>
							<image src="../../static/wealthLoanImage/矩形 1574.png" mode=""></image>
							<text>免息</text>
						</view>
					</view>
					<view>
						<image src="../../static/wealthLoanImage/组 4768.png" mode=""></image>
						<text>抢疯了</text>
						<view>
							<image src="../../static/wealthLoanImage/矩形 1574.png" mode=""></image>
							<text>免息</text>
						</view>
					</view>
					<view>
						<image src="../../static/wealthLoanImage/组 4769.png" mode=""></image>
						<text>抢疯了</text>
						<view>
							<image src="../../static/wealthLoanImage/矩形 1574.png" mode=""></image>
							<text>免息</text>
						</view>
					</view>
				</view>
				<view class="top_line">
					<view></view>
					<text>新人专享礼</text>
				</view>
				<view class="new_people">
					<swiper :duration="1000" class="banner" previous-margin="50rpx" next-margin="40rpx">
						<swiper-item class="banner-item">
							<view class="swiper-item">
								<image class="swiper-image" src="../../static/wealthImg/减去%202.png" mode=""></image>
							</view>
							<view class="swiper-text">
								<view class="left">
									<text>最高</text>
									<view>
										<text>90</text>
										<text>元</text>
									</view>
								</view>
								<view class="middle">
									<text>新人免息券</text>
									<text>翔瑞借首次借款可用</text>
								</view>
								<view class="right">
									<text>获取额度</text>
								</view>
							</view>
						</swiper-item>
						<swiper-item class="banner-item">
							<view class="swiper-item">
								<image  class="swiper-image" src="../../static/wealthImg/减去%202.png" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="top_line">
					<view></view>
					<text>省心借钱</text>
				</view>
				<view class="main_content">
					<view class="main_content_item">
						<view class="left">
							<view class="top">
								<text>升级贷</text>
								<text></text>
							</view>
							<view class="middle">
								<text>纯信用</text>
								<text>额度循环</text>
								<text>随借随还</text>
							</view>
							<view class="bottom">
								<text>最高可借额度(元)</text>
								<text>200,000.00</text>
							</view>
						</view>
						<view class="right">
							<text>去开通</text>
						</view>
					</view><view class="main_content_item">
						<view class="left">
							<view class="top">
								<text>省心贷款</text>
								<text>本服务有翔瑞消费金融提供</text>
							</view>
							<view class="middle">
								<text>日息低至万三</text>
								<text>门槛低到账快</text>
							</view>
							<view class="bottom">
								<text>最高可借额度(元)</text>
								<text>200,000.00</text>
							</view>
						</view>
						<view class="right">
							<text>去开通</text>
						</view>
					</view>
				</view>
				<view class="main-fixed">
					<text>最高可借额度（元）</text>
					<text>200,000,00</text>
					<text>审判便捷 | 年综合费率最低可至7.2%</text>
					<view class="agreeBtn">
						<text>同意协议并领取</text>
						<view class="agreeBtn_abs">
							<image src="../../static/wealthLoanImage/联合 2.png" mode=""></image>
							<text>开通享最高80元免息</text>
						</view>
					</view>
					<view class="information_link">
						<text>同意</text>
						<navigator url="#">
							<text>祥瑞借款协议及信息授权</text>
						</navigator>
					</view>
					<view class="main_step">
						<view class="left">
							<text>三步</text>
							<text>领取</text>
						</view>
						<view class="right">
							<view>1</view>
							<text>实名认证 ···· ></text>
							<view>2</view>
							<text>信用卡认证 ···· ></text>
							<view>3</view>
							<text>信用评估</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	// 页面定位模块
	.main-fixed {
		width: 702rpx;
		padding-bottom: 40rpx;
		background-color: #ffffff;
		position: absolute;
		left: 24rpx;
		top: -106rpx;
		border-radius: 15rpx;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
		box-shadow: 0 0 15rpx 5rpx #ddd;

		>text:nth-of-type(1) {
			margin-top: 40rpx;
			margin-bottom: 24rpx;
		}

		>text:nth-of-type(2) {
			font-size: 44rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 42rpx;
		}

		>text:nth-of-type(3) {
			color: #999999;
			margin-bottom: 40rpx;
		}

		.agreeBtn {
			height: 88rpx;
			width: 526rpx;
			background-color: #3476f1;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			position: relative;

			.agreeBtn_abs {
				width: 204rpx;
				position: absolute;
				left: 260rpx;
				top: -30rpx;

				image {
					width: 100%;
					height: 44rpx;
				}

				text {
					font-size: 20rpx;
					color: #ffffff;
					position: absolute;
					top: -18rpx;
					left: 10rpx;
				}
			}
		}

		.information_link {
			display: flex;
			margin-bottom: 20rpx;

			navigator {
				color: #3476f1;
			}
		}

		.main_step {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 654rpx;
			background-color: #eaf1fe;
			border-radius: 4rpx;

			.left {
				display: flex;
				flex-direction: column;
				height: 100%;
				font-size: 20rpx;
				margin-right: 20rpx;
			}

			.right {
				display: flex;
				align-items: center;

				view {
					width: 30rpx;
					text-align: center;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 50%;
					background-color: #ffffff;
					margin-right: 10rpx;
				}
			}
		}
	}

	// 页面定位模块

	.page {
		background-color: #3476f1;
		font-family: 苹方, sans-serif;
	}

	.container {
		width: 100%;
		height: 114rpx;
		background-color: #3476f1;
		position: fixed;
		z-index: 20;
		top: 0;
		.header {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			.search {
				position: relative;

				.searchInput {
					width: 446rpx;
					background-color: #ffffff;
					height: 60rpx;
					border-radius: 50rpx;
					box-sizing: border-box;
					padding-left: 74rpx;
					margin-right: 24rpx;
					font-size: 24rpx;
					color: #cccccc;
				}

				.searchImg {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					top: 16rpx;
					left: 16rpx;

				}
			}

			text {
				font-size: 44rpx;
				color: white;
				font-weight: bold;
				margin: 0 24rpx;
			}
		}

		
	}
	.main-box{
		overflow: hidden;
		.main {
			background-color: #fefefe;
			margin-top: 220rpx;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			position: relative;
			box-sizing: border-box;
			padding-top: 470rpx;
			.main_nav {
				width: 100%;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 24rpx;
		
				>view {
					width: 88rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
		
					image {
						width: 88rpx;
						height: 88rpx;
						margin-bottom: 14rpx;
					}
		
					text {
						font-size: 24rpx;
						color: #666666;
					}
		
					>view {
						position: absolute;
						top: -10rpx;
						left: 40rpx;
		
						image {
							width: 60rpx;
							height: 35rpx;
						}
		
						>text {
							position: absolute;
							left: 8rpx;
							color: #ffffff;
						}
					}
				}
			}
		
			.top_line {
				box-sizing: border-box;
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				margin: 40rpx 0;
		
				view {
					width: 10rpx;
					height: 32rpx;
					background-color: #3476f1;
					margin-right: 10rpx;
				}
		
				text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		
			.new_people {
				width: 100%;
				height: 156rpx;
				.banner{
					width:100%;
					height: 156rpx;
					display: flex;
					justify-content: flex-start;
					.banner-item{
						position: relative;
						left: -15rpx;
						.swiper-item {
							width: 646rpx;
							height: 100%;
							position: relative;
							.swiper-image {
								width: 100%;
								height: 100%;
							}
						}
						.swiper-text{
							position: absolute;
							left: 0;
							top: 0;
							display: flex;
							box-sizing: border-box;
							padding-top: 40rpx;
							color: #ffffff;
							font-size: 24rpx;
							.left{
								margin-left: 30rpx;
								display: flex;
								align-items: center;
								>text{
									writing-mode: tb-rl;
								}
								>view{
									>text:nth-of-type(1){
										font-size: 60rpx;
										font-weight: bold;
									}
								}
							}
							.middle{
								display: flex;
								flex-direction: column;
								margin-left: 30rpx;
								>text:nth-of-type(1){
									font-size: 28rpx;
								}
							}
							.right{
								width: 178rpx;
								height: 48rpx;
								margin-top: 15rpx;
								text-align: center;
								line-height: 48rpx;
								margin-left: 36rpx;
								border-radius: 30rpx;
								font-size: 24rpx;
								color: #e2bc7f;
								background-color: #ffffff;
							}
						}
					}
				}
			}
			.main_content{
				.main_content_item{
					width: 702rpx;
					height: 210rpx;
					box-shadow: 0 0 15rpx 5rpx #ddd;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-around;
					font-size: 24rpx;
					color: #999999;
					border-radius: 15rpx;
					margin-top: 26rpx;
					.left{
						.top{
							text:nth-of-type(1){
								font-size: 32rpx;
								color: #333333;
								font-weight: bold;
								margin-right: 20rpx;
							}
						}
						.middle{
							margin-top: 20rpx;
							>text{
								padding: 8rpx;
								font-size: 20rpx;
								color: #3476f1;
								border-radius: 4rpx;
								border: 2rpx solid #3476f1;
								margin-right: 10rpx;
							}
						}
						.bottom{
							margin-top: 38rpx;
							text:nth-of-type(2){
								font-size: 36rpx;
								color:#f85656;
								font-weight: bold;
								margin-left: 26rpx;
							}
						}
					}
					.right{
						width: 174rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						color: #ffffff;
						font-size: 28rpx;
						background-color: #3476f1;
						border-radius: 44rpx;
					}
				}
			}
		}
	}
	
</style>
